import "./index.less"
import React, { FC, useState, useEffect, useMemo } from "react";
import {
  NavBar,
  Button,
  Form,
  Input,
  Cascader,
  TextArea,
  ImageUploader,
  Toast,
} from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import { partyMemberActivities } from "./service";
import { PageHeaderNew } from "@/components";



function EventDetails(props: any) {
  const navigate = useNavigate();
  const goto = (url: string) => () => {
    navigate(url);
  }
  const location = useLocation();
  const [articleType, setArticleType] = useState("")//文章类型
  const [articleId, setArticleId] = useState("")//文章id
  const [hearderTitle, setHearderTitle] = useState("活动详情")
  const [articleContent, setArticleContent] = useState('')
  const [articleTitle, setArticleTitle] = useState('')
  const [eventTime, setEventTime] = useState('')
  const [eventPeople, setEventPeople] = useState('')
  useEffect(() => {
    const [type, detail] = location?.search?.substring(1).split("&&")
    setArticleId(detail.split("=")?.[1]);
    setArticleType(type.split("=")?.[1])
  }, [location])
  useEffect(() => {
    if (articleType == "activity" || articleType == "training") {//
      partyMemberActivities({ villageCode: "511602006004", type: articleType/* classType:selectType  */ })
        .then((res) => {
          if (res.code == 200) {
            const filterData = res.data?.filter((item: any) => item?.activityId == articleId)
            const data = filterData?.[0]
            setArticleContent(data?.activityContent)
            setEventTime(data?.applyStartTime + "至" + data?.applyStopTime)
            setArticleTitle(data?.activityName)
            setEventPeople(data?.applyCount + "人")
          } else {
            console.log(res.data);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }

  }, [articleType, articleId])

  useEffect(() => {
    document.getElementById('article-container').innerHTML = articleContent;
  }, [articleContent])
  return (
    <div className="eventDetails" >
      <div className="eventDetails-hearder">
        <div className="header-bg">
          <PageHeaderNew
            title={hearderTitle}
            goBack={() => navigate(`/activityOrTraining?type=${articleType}`)}
          />
        </div>
      </div>
      <div className="eventDetails_contentBox">
        <div className="eventDetails-content" /* id="article-container" */>
          <img src="/images/mycommunity/bioqian.png" alt="" className="bioqian" />
          <div className="eventDetails-content-title">{articleTitle}</div>
          <div className="eventDetails-content-imfor">
            <img src={"" || "/images/mycommunity/noImage.jpg"} className="cover_img" />
            <div className="imfor-title">活动时间</div>
            <div className="imfor-content">{eventTime}</div>
            <div className="imfor-title">已报名人数</div>
            <div className="imfor-content">{eventPeople}</div>
          </div>
        </div>
        <div className="eventDetails-article" id="article-container"></div>
        <div className="eventDetails-btn"
          onClick={goto(`/signUp?type=${articleType}&&detail=${articleId}`)}
        >去报名</div>
      </div>

    </div>
  );
}

export default EventDetails;
